// import CardComponent from "../../../components/CardComponent";
// import { useManageInfo } from "../../../hooks/LoadManage";
// function Trash() {
//     
//     return (
//         <div className="mt-5">
//             {manageInfo.map(v => {
//                 return (
//                     <CardComponent v={v} key={v._id} />
//                 )
//             })}
//         </div>
//     )
// }

// export default Trash
import React, { useState } from 'react';
import { Button, message, Table, Tag } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import { useManageInfo } from '../../../hooks/LoadManage';
import { getInfoManage, manageType } from "../../../store/manage"
import { delSelect, manageServer, updIsStar } from '../../../server/manageServer';
import { useRequest } from 'ahooks';
import { useDispatch } from 'react-redux';



const columns: TableColumnsType<manageType> = [
    {
        title: '标题',
        dataIndex: 'title',
        render: (text: string) => <>{text}</>,
    },
    {
        title: '是否发布',
        dataIndex: 'isPublished',
        render: (isPublished: boolean) => <Tag className="mr-4"><div className='c-blue'>{isPublished ? '已发布' : '未发布'}</div></Tag>,
    },
    {
        title: '答卷',
        dataIndex: 'answerCount',
    }, {
        title: '创建时间',
        dataIndex: 'createdAt',
    },
];



const Trash: React.FC = () => {
    const manageInfo = useManageInfo().filter(v => v.isDeleted);
    const [selectList, setList] = useState<manageType[]>([])

    const dispatch = useDispatch()

    const rowSelection: TableProps<manageType>['rowSelection'] = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: manageType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            setList(selectedRows)
        },
    };
    const del = async () => {
        if (!selectList.length) return message.info('未选中问卷')
        selectList.forEach(async v => {
            try {
                await delSelect(v._id)
                run()
            } catch (e) {
                console.error(e)
            }
        })
    }

    const recover = () => {
        if (!selectList.length) return message.info('未选中问卷')
        selectList.forEach(async v => {
            try {
                await updIsStar(v._id, v.isStar, !v.isDeleted)
                run()
            } catch (e) {
                console.error(e)
            }
        })
    }
    const { run } = useRequest(manageServer, {
        manual: true,
        onSuccess(result) {
            const { data } = result
            dispatch(getInfoManage(data)) // 存储到 redux store
        },
        onFinally() {

        },
    })
    return (
        <div>
            <Button type="primary" className='mr-2 mb-4' onClick={recover}>恢复</Button>
            <Button type="primary" onClick={del}>彻底删除</Button>
            <Table<manageType>
                rowSelection={{ type: 'checkbox', ...rowSelection }}
                columns={columns}
                pagination={false}
                rowKey={q => q._id}
                dataSource={manageInfo}
            />
        </div>

    );
};

export default Trash;